﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .url {
            min-width: 500px;
        }

        .result {
            margin-top: 20px;
            min-height: 200px;
            border: 1px solid black;
            padding: 10px;
            font-size:14px;
        }

            .result p {
                margin: 0;
                padding: 4px;
            }

        .list a {
            color: dodgerblue;
            text-decoration: none;
        }

            .list a:hover {
                color: dodgerblue;
                text-decoration: underline;
            }
    </style>
</head>
<body>
    <div class="condition">
        <p>webapi2 return value test</p>
        <ol class="list" id="list">
            <li><a href="/api/test/voidrequest">return void</a></li>
            <li><a href="/api/test/HttpResponseMessageRequest">return HttpResponseMessage</a></li>
            <li><a href="/api/test/HttpResponseMessageRequestNumberList">return HttpResponseMessage and the message is products</a></li>
            <li><a href="/api/test/IHttpActionResultRequest">return TextResult</a></li>
            <li><a href="/api/test/BuiltInResultsRequest?id=1">return IHttpActionResult</a></li>
        </ol>
        <div>
            <label for="url">url:</label>
            <input type="text" class="url" id="url" />
            <input type="button" class="request" id="btn-request" value="请求url" />
            <input type="button" id="btn-clear" value="清空日志" />
        </div>
    </div>
    <div class="result" id="result"></div>
    <script>
        const Logger = () => {
            var i = 1;
            var content = null;
            return {
                addLog: function (msg, color) {
                    if (!color) color = 'black';
                    var p = document.createElement('p');
                    p.style.color = color;
                    p.innerText = `${i} : ${msg}`;
                    content.appendChild(p);
                    i += 1;
                },
                addRangeLog: function (msgList, color) {
                    if (!color) { color = 'black'; }
                    var frag = document.createDocumentFragment();
                    msgList.forEach(msg => {
                        var p = document.createElement('p');
                        p.style.color = color;
                        p.innerText = `${i} : ${msg}`;
                        frag.appendChild(p);
                        i += 1;
                    });
                    content.appendChild(frag);
                },
                setContainer(idSelector) {
                    if (idSelector) {
                        content = document.querySelector(idSelector);
                    } else {
                        var c = document.createElement('div');
                        c.className = "content";
                        document.body.appendChild(c);
                    }
                },
                clearContent() {
                    i = 1;
                    content.innerHTML = "";
                }
            }
        }
        var logger = Logger();
        logger.setContainer("#result");
        var list = document.querySelectorAll('#list a');
        var request = document.querySelector('#btn-request');
        var clear = document.querySelector('#btn-clear');
        var url = document.querySelector('#url');
        clear.addEventListener("click", logger.clearContent);
        list.forEach(i => {
            i.addEventListener('click', e => {
                e.preventDefault();
                var t = e.currentTarget;
                var u = t.getAttribute('href');
                url.value = u;
            });
        })
        request.addEventListener('click', () => {
            var u = url.value;
            var l = logger;
            l.clearContent();
            fetch(u)
                .then(res => {
                    l.addLog(`url : ${res.url}`);
                    l.addLog(`type : ${res.type}`);
                    l.addLog(`ok : ${res.ok}`);
                    l.addLog(`status : ${res.status}`);
                    l.addLog(`statusText : ${res.statusText}`);
                    l.addLog(`bodyUsed : ${res.bodyUsed}`);
                    l.addLog(`redirected : ${res.redirected}`);
                    l.addLog('-----headers-----');
                    var h = res.headers;
                    var kIterator = h.keys();
                    var vIterator = h.values();
                    var isOver = false;
                    while (!isOver) {
                        var k = kIterator.next();
                        var v = vIterator.next();
                        isOver = k.done;
                        if (!isOver) {
                            l.addLog(`${k.value} : ${v.value}`);
                        }
                    };
                    l.addLog('-----headers end-----');
                    return res.text();
                })
                .then(data => {
                    var body = "";
                    try {
                        body = JSON.stringify(JSON.parse(data), null, 2);
                    } catch (e) {
                        body = data;
                    }
                    if (body === "") { body = "no content" }
                    l.addLog('-----content-----');
                    l.addLog(body,"red");
                    l.addLog('-----content end-----');
                })
        })
    </script>
</body>
</html>